<!-- AlertWidget.vue -->
<template>
    <WidgetContainer :widget-id="config.id">
        <el-alert @click="onClick" :style="{ width: config.attributes.width ? config.attributes.width : '100%' }"
            :title="config.attributes.title" :type="config.attributes.alertType" :closable="config.attributes.closable"
            :center="config.attributes.center" :show-icon="config.attributes.showIcon"
            :effect="config.attributes.effect" :description="config.attributes.description"
            :class="config.attributes?.cssClass" />
    </WidgetContainer>
</template>

<script setup>
import { inject } from 'vue'
import { ElAlert } from 'element-plus';
import { executeEventHandler } from '@/utils/eventExecutor'

const formData = inject('formData')
const widgetList = inject('widgetList')

const props = defineProps({
    config: {
        type: Object,
        required: true,
    },
});

const onClick = () => {
    executeEventHandler(props.config.events?.onClick, { widgetConfig: props.config, formData: formData.value, widgetList: widgetList.value })
}
</script>